const thumbBar = document.querySelector('.thumb-bar');
const overlay = document.querySelector('.overlay');
const displayedImg = document.querySelector('.displayed-img');
const button = document.querySelector('.dark');
let darked = false;

for (let i = 0; i < 5; i++) {
    let imgSrc = 'images/pic' + (i + 1) + '.jpg';
    const img = document.createElement('img');
    img.src = imgSrc;
    thumbBar.appendChild(img);
}

thumbBar.onclick = function (e) { 
    /** @type {HTMLImageElement}*/ 
    const eventImg = e.target; 
    console.log(e.target); 
    displayedImg.src = eventImg.src;
}; 

button.onclick = function (e) { 
    if (darked) { 
        button.textContent = '变暗'; 
        darked = false; 
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
    } else { 
        button.textContent = '变亮'; 
        darked = true; 
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    }
};
